<template>
  <div class="bed-wrap">
    <div class="bed-top">
      <div class="bed-item" :class="{'active': currentView == item.id}" v-for="item in buildingData" @click="handleChangeBuilding(item)" :key="item.id">
        <span class="bed-item-img">
          <img src="@/assets/bed-home/home-top1.png" alt="" />
        </span>
        {{ item.name }}
      </div>
      <el-tooltip class="tooltip-wrap" placement="bottom">
        <div slot="content">
          温馨提示：<br/>
          房间状态：绿色代表有人入住，灰色代表房间未住满，蓝色代表房间有人预约<br/>
          床位状态：蓝色代表有人在床，黄色床位代表有人尿床<br/>
         </div>
        <img src="@/assets/images/bj-icon2.png" >
      </el-tooltip>
    </div>
    <div class="bed-content">
      <div class="bed-left">
        <div class="bed-left-item" v-for="item in floorData" :key="item.id" :class="{'active': currentFloorView == item.id}" @click="handleChangeFloor(item)">{{ item.name }}</div>
      </div>
      <div class="bed-right">
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="item in roomList" :key="item.id">
            <!-- colorType1 -->
            <div class="room-item" :class="{'colorType1': item.status == 3 || item.status == 0, 'colorType2': item.status == 2}">
              <div class="room-top">
                <div class="room-top-left">
                  <span></span>
                  <div>{{ item.room_code }}房</div>
                </div>
                <div class="room-top-right">
                  <!-- colorBedType1 -->
                  <div class="room-right-item" :class="{'colorBedType2': ite.on_bed == 1, 'colorBedType1': ite.is_wet == 1}" v-for="ite in item.bed_list" :key="ite.id">
                    <div class="room-right-item-left">
                      <div class="rml-top">
                        <span></span>
                        {{ ite.bed_code }}床
                      </div>
                      <!-- bedstatus2 -->
                      <div class="rml-bot" :class="{'bedstatus2': ite.status == 2, 'bedstatus3': ite.status == 0 || ite.status == 3}">
                        {{
                          ite.status == 1
                            ? "床位空闲"
                            : ite.status == 2
                            ? "有人入住"
                            : "有人预约"
                        }}
                      </div>
                    </div>
                    <div class="room-right-item-right">
                      <p>老人姓名：{{ ite.elder && ite.elder.name || '暂无' }}</p>
                      <p>老人性别：{{ ite.elder && (ite.elder.sex == 1 ? '男' : ite.elder.sex == 2 ?'女' : "暂无") }}</p>
                      <p>老人年龄：{{ ite.elder && ite.elder.age || '暂无' }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="room-bottom">
                <div class="room-title">{{ item.name }}{{item.price}}元/月</div>
                <div v-if="item.carer_list && item.carer_list.length" class="room-carer">
                  护工：<span v-for="(carer, caindex) in item.carer_list" :key="caindex">{{ carer && carer.name }} {{ caindex+1 == item.carer_list.length ? '' : '，' }}</span>
                </div>
               <!-- <div class="room-action">
                  <button class="room-success">护工管理</button>
                  <button class="room-success">设备列表</button>
                  <button class="room-danger">删除房间</button>
                </div> -->
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  import roomForm from "@/components/CommonForm/roomForm";
  import { getList } from "@/api/bedList";
  import { getOlder } from "@/api/oldermanager";
  import { getBedType } from "@/api/bedType";
  import { setNurse, getHgList, getNurseList } from "@/api/nursemanager";
  import { getBuilding, getFloor } from "@/api/building";
  import { devicebind, getdevice, deviceIotlog } from "@/api/device";
  import * as Api_ysxroom from "@/api/ysxroom";
  // import mixins from '@/utils/mixins.js';
  // import mixinstest from '@/utils/mixinstest.js';
  import dictData from "@/utils/dictionary";
  const dict = dictData;
  export default {
    name: "BadNum",
    components: { roomForm },
    filters: {
      sexFilter(value) {
        if (value == 1) {
          return "男";
        } else if (value == 2) {
          return "女";
        } else {
          return "未填写";
        }
      },
      typeFilter(value) {
        for (let i = 0; i < dict.olderType.length; i++) {
          const element = dict.olderType[i];
          if (value == i + 1) {
            return element;
          }
        }
      },
    },
    // mixins: [mixinstest],
    data() {
      return {
        //楼栋列表信息
        buildingData: [],
        //楼层列表信息
        floorData: [],
        //房间列表信息
        roomList: [],
        //目前的楼栋
        currentView: 0,
        //目前的楼层
        currentFloorView: 0,
      };
    },
    computed: {
      webSocketMsg() {
        return this.$store.state.websocket.webSocketMsg
      }
    },
    beforeDestroy() {},
    watch:{
        webSocketMsg:{
          handler: function(newVal) {
            this.init(newVal, this)
          }
        }
    },
    mounted() {
      this.getBuildingData();
    },
    methods: {
      init(res, _that){
        let result = JSON.parse(res)
        if(!result){
          return false
        }
        if(result.route == 'device_onoff') {
          let data = result.data;
          if(data.type == 11) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //在床
                    if(data.status[1].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 1)
                    } else { //离床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 0)
                    }
                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else { //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }
                  }
                })
              })
            })
          }
          if(data.type == 12) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else { //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }
                  }
                })
              })
            })
          }
        }
      },
      //切换楼栋
      handleChangeBuilding(item) {
        let params = {
          building_id: item.id,
        };
        this.currentView = item.id;
        if (params.building_id) this.getFloorData(params);
      },
      //切换楼层
      handleChangeFloor(item) {
        let floor_id = item.id;
        this.currentFloorView = item.id;
        if (floor_id) this.getTableData(floor_id);
      },
      //获取楼栋信息
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp?.data?.list.reverse() || [];
            this.building_id = this.buildingData[0].id;
            this.currentView = this.buildingData[0].id;
            this.activename = this.buildingData[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      //获取楼层信息
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list || [];
            if (resp.data.list.length == 0) return;
            this.floor_id = this.floorData[0].id;
            this.currentFloorView = this.floorData[0].id;
            this.flooractivename = this.floorData[0].name;
            this.getTableData(resp.data.list[0].id);
          }
        });
      },
      //获取房间信息
      getTableData(floor_id) {
        this.selectForm = {
          page_size: 120,
          floor_id,
        };
        getList("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data.list;
            data.map((item) => {
              let obj = {};
              obj.status1 = item.bed_list.filter((i) => {
                return i.status == 1;
              });
              obj.status2 = item.bed_list.filter((i) => {
                return i.status == 2;
              });
              obj.status3 = item.bed_list.filter((i) => {
                return i.status == 3;
              });
              item.status = obj.status3.length > 0 ? 3 : obj.status2.length > 0 ? 2 : 1;
              item.is_cd = 0;
              item.is_sm = 0;
              item.bed_list.forEach(ite => {
                if(ite.is_cd) {
                  item.is_cd = 1;
                }
                if(ite.is_sm) {
                  item.is_sm = 1;
                }
                if(ite.id4 == 100) {
                  ite.on_bed = 100;
                }
                ite.offline = 2;
                ite.bed_device.length && ite.bed_device.forEach((bed) => {
                  if(bed.type == 12 || bed.type == 11) {
                    // offline 0 在线  1离线
                    if(bed.offline == '0') {
                      ite.offline = 0;
                    } else {
                      ite.offline = 1;
                      ite.on_bed = 0;
                      ite.is_wet = 0;
                    }
                  }
                }) 
              })
            });
            this.roomList = data;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .tooltip-wrap{
    width: 30px;
    position: absolute;
    right: 20px;
    top: 10px;
  }
  .bed-wrap{
    background-color: #0A1E3D;
    min-height: calc(100vh - 65px) !important;
    // 头部css
    .bed-top{
      position: relative;
      padding-left: 20px;
      width: 100%;
      height: 55px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: #16325D;
      box-sizing: border-box;
      box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.35);
      .active{
        .bed-item-img{
          background: url(../../assets/bed-home/home-top-bg2.png) no-repeat;
          background-size: 100%;
        }
      }
      .bed-item{
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        &:nth-child(n+2) {
          margin-left: 23px;
        }
        &:hover{
          .bed-item-img{
            background: url(../../assets/bed-home/home-top-bg2.png) no-repeat;
            background-size: 100%;
          }
        }
        img{
          width: 13px;
          height: 14px;
        }
      }
      .bed-item-img{
        display: inline-block;
        width: 29px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        background: url(../../assets/bed-home/home-top-bg1.png) no-repeat;
        background-size: 100%;
      }
    }
    // 头部css end
    // 内容css start
    .bed-content{
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      .bed-left{
        .bed-left-item{
          width: 77px;
          height: 35px;
          background: url(../../assets/bed-home/home-left2.png) no-repeat;
          background-size: 100%;
          display: flex;
          align-items: center;
          padding-left: 10px;
          cursor: pointer;
          font-size: 14px;
          color: #ffffff;
          &:hover{
            background: url(../../assets/bed-home/home-left1.png) no-repeat;
            background-size: 100%;
          }
          &:nth-child(n+2) {
            margin-top: 5px;
          }
        }
        .active{
          background: url(../../assets/bed-home/home-left1.png) no-repeat;
          background-size: 100%;
        }
      }
      .bed-right{
        flex: 1;
        margin-left: 10px;
        margin-top: -10px;
      }

      .room-item{
        width: 100%;
        height: 350px;
        background: url(../../assets/bed-home/home-bg2.png) no-repeat;
        background-size: 100% 100%;
        padding: 11px;
        box-sizing: border-box;
        margin: 10px 0;
        .room-top{
          height: 195px;
          display: flex;
          justify-content: center;
          align-items: center;
          .room-top-left{
            text-align: center;
            span{
              display: inline-block;
              width: 38px;
              height: 34px;
              background: url(../../assets/bed-home/home1.png) no-repeat;
              background-size: 100%;
            }
            div{
              font-size: 23px;
              color: #ffffff;
              margin-top: 6px;
            }
          }
          .room-top-right{
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px 0;
            padding-top: 12px;
            margin-left: 10px;
            box-sizing: border-box;
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
            &::-webkit-scrollbar {
              display: none; /* Chrome Safari */
            }
            .room-right-item{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 10px;
              &:nth-child(n+2) {
                margin-top: 10px;
              }
            }
            .room-right-item-left{
              .rml-top{
                color: #fff;
                font-size: 16px;
                line-height: 16px;
                span{
                  margin-right: 15px;
                  display: inline-block;
                  width: 14px;
                  height: 16px;
                  background: url(../../assets/bed-home/bed-man1.png) no-repeat;
                  background-size: 100%;
                  vertical-align: middle;
                }
              }
              .rml-bot{
                margin-top: 7px;
                width: 68px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background: #64c13d;
                border: 1px solid #64c13d;
                border-radius: 3px;
                font-size: 14px;
                color: #ffffff;
              }
              //有人入住
              .bedstatus2{
                // color: #FFB400;
                // background: #FFF3D4;
                // border: 1px solid #FEEBBA;
                color: #ffffff;
                background: #1890ff;
                border: 1px solid #1890ff;
              }
              //有人预约
              .bedstatus3{
                color: #0082FF;
                background: #E8F4FF;
                border: 1px solid #BDDFFE;
              }
            }
            .room-right-item-right{
              margin-left: 25px;
              p{
                font-size: 15px;
                color: #FFFFFF;
                line-height: 13px;
                &:nth-child(n+2) {
                  margin-top: 11px;
                }
              }
            }
          }

        }
        .room-bottom{
          margin-top: 13px;
          padding-top: 32px;
          .room-title {
              font-size: 20px;
              line-height: 19px;
              color: #fff;
              text-align: center;
          }
          .room-carer {
              font-size: 16px;
              color: #fff;
              line-height: 16px;
              text-align: center;
              margin-top: 12px;
          }
          .room-action{
            margin-top: 10px;
            display: flex;
            justify-content: center;
            button{
              width: 86px;
              height: 26px;
              text-align: center;
              line-height: 26px;
              border-radius: 5px;
              box-sizing: border-box;
              font-size: 13px;
              outline: none;
              cursor: pointer;
              &:nth-child(n+2) {
                margin-left: 20px;
              }
            }
            .room-success{
              background: #E8F4FF;
              color: #0082FF;
              border: 1px solid #BDDFFE;
            }
            .room-danger{
              background: #FFDFDF;
              border: 1px solid #FEB6B6;
              color: #FF1515;
            }
          }
        }
      }
      //房间有人预约
      .colorType1{
        background: url(../../assets/bed-home/home-bg1.png) no-repeat;
        background-size: 100% 100%;
        .room-top{
          .room-top-left{
             span{
               background: url(../../assets/bed-home/home2.png) no-repeat;
               background-size: 100%;
             }
          }
        }

      }

      //房间有人住满
      .colorBedType2 {
        background-color: rgb(43 113 222) !important;
        border-radius: 10px !important;
        .rml-top{
          color: #FFA200 !important;
          span{
            background: url(../../assets/bed-home/bed-man2.png) no-repeat !important;
            background-size: 100% !important;
          }
        }
      }
      //在床
      .colorType2{
        background: url(../../assets/bed-home/home-bg3.png) no-repeat;
        background-size: 100% 100%;
        .room-top{
          .room-top-left{
             span{
               background: url(../../assets/bed-home/home3.png) no-repeat;
               background-size: 100%;
             }
          }
        }
      }
      //尿床
      .colorBedType1 {
        background-color: rgb(150 184 13) !important;
        border-radius: 10px !important;
        .rml-top{
          color: #FF455B !important;
          span{
            background: url(../../assets/bed-home/bed-man3.png) no-repeat !important;
            background-size: 100% !important;
          }
        }
      }
    }
  }

</style>
